<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
                margin: 0;
                padding: 0;
            }
            #box{
                width:800px;
                height:600px;
                position: relative;
                margin: 100px auto;
                background:#000000;
                border:2px solid red;
                overflow: hidden;
            }
            .ball{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
            }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // 烟花效果 注释和代码至少可以脱稿编写3分之2
        // // 写注释
        // // 构造函数 
        // function Fireworks(box){
        //     // 获取大盒子
        //     this.fireWBox = document.querySelector(box)
        //     // 调用绑定事件
        //     this.bindEvent()
        // }
        // // 原型对象里创建一个bindEvent绑定事件的函数
        // Fireworks.prototype.bindEvent = function(){
        //     // 把指向实例对象的this赋给self 以便区分绑定事件的this
        //     var self = this
        //     // 元素绑定点击事件 
        //     self.fireWBox.onclick = function(e){
        //         // 事件对象兼容
        //         e = e || window.event
        //         // 调用createfirework创建元素 把返回值赋给 fireLeft 
        //         var fireLeft = self.createfirework()
        //         // 点击的时候 让子元素 left值 为父元素最左边的位置 距离 点击的位置 的值
        //         fireLeft.style.left = e.offsetX + "px";
        //         // jQuery动画 animate
        //         $(".ball").animate({
        //             // top值为 点击位置的值
        //             top : e.offsetY
        //         // 固定时间   ，callback(回调函数) 
        //         },1000,function(){
        //             // 动画运行结束时，移除子元素
        //             fireLeft.remove()
        //         })
        //         // fireLeft.remove()
        //     }
        // }
        // // 原型对象里创建一个createfirework创建元素的函数
        // Fireworks.prototype.createfirework = function(){
        //     // 创建一个div作为上升的烟火
        //     var $fireW = document.createElement('div')
        //     // div的class为 all
        //     $fireW.className = 'ball'
        //     // div.style.backgroundColor = "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0");
        //     // 不兼容的随机颜色
        //     $fireW.style.backgroundColor = "#" + Math.round(parseInt("ffffff",16 )* Math.random()).toString(16).padStart(6 , '0')
        //     // 把div放进父元素里面
        //     this.fireWBox.appendChild($fireW)
        //     // 返回div
        //     return $fireW
        // }
        // // new一个实例对象
        // var fireW = new Fireworks('#box')


        // // 去代码留注释
        //      // 构造函数 
        //     function Fireworks(box){
        //         // 获取大盒子
        //          this.fireBox = document.querySelector(box)
        //         // 调用绑定事件
        //         this.bindEvent()
        //     }

        // // 原型对象里创建一个bindEvent绑定事件的函数
        // Fireworks.prototype.bindEvent = function(){
        //     // 把指向实例对象的this赋给self 以便区分绑定事件的this
        //     var self = this
        //     // 元素绑定点击事件 
        //     self.fireBox.onclick = function(e){
        //          // 事件对象兼容
        //         e = e || window.event
        //         // 调用createfirework创建元素 把返回值赋给 fireLeft 
        //         var fireLeft = self.createfirework()
        //         // 点击的时候 让子元素 left值 为父元素最左边的位置 距离 点击的位置 的值
        //         fireLeft.style.left = e.offsetX + 'px'
        //         // jQuery动画 animate
        //         $(fireLeft).animate({
        //              // top值为 点击位置的值
        //             top: e.offsetY
        //         // 固定时间   ，callback(回调函数) 
        //         },1000,function(){
        //              // 动画运行结束时，移除子元素
        //             fireLeft.remove()
        //         })
        //     }
        // }

        // // 原型对象里创建一个createfirework创建元素的函数
        // Fireworks.prototype.createfirework = function(){
        //     // 创建一个div作为上升的烟火
        //     var $fireW = document.createElement('div')
        //     // div的class为 ball
        //     $fireW.className = 'ball'
        //     // div.style.backgroundColor = "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0");
        //     // 不兼容的随机颜色
        //     $fireW.style.backgroundColor = "#" + Math.round(parseInt("ffffff",16 )* Math.random()).toString(16).padStart(6 , '0')
        //     // 把div放进父元素里面
        //     this.fireBox.appendChild($fireW)
        //     // 返回div
        //     return $fireW
        // }
        // // new一个实例对象 
        // var fire = new Fireworks('#box')


        // // 脱稿
        // function Fireworks(box){
        //     this.fireBox = document.querySelector(box)
        //     this.bindEvent()
        // } 
        // Fireworks.prototype.bindEvent = function(){
        //     var self = this
        //     self.fireBox.onclick = function(e){
        //         e = e || e.window
        //         var fireLeft = self.createFireWs()
        //         fireLeft.style.left = e.offsetX + 'px'
        //         $(fireLeft).animate({
        //             top: e.offsetY
        //         },800,function(){
        //             fireLeft.remove()
        //         })
        //     }
        // }
        // Fireworks.prototype.createFireWs = function(){
        //     var $fire = document.createElement('div')
        //     $fire.className = 'ball'
        //     $fire.style.backgroundColor = "#" + Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0')
        //     this.fireBox.appendChild($fire)
        //     return $fire
        // }
        // var fire = new Fireworks('#box') 

        
        // //脱稿2
        // function Fireworks(box){
        //     this.fireBox = document.querySelector(box)
        //     this.bindEvent()
        // }

        // Fireworks.prototype.bindEvent = function(){
        //     var self = this
        //     self.fireBox.onclick = function(e){
        //         e = e || window.event
        //         var fireLeft =  self.createfirework()
        //         fireLeft.style.left = e.offsetX + 'px'
        //         $(fireLeft).animate({
        //             top: e.offsetY
        //         },500,function(){
        //             fireLeft.remove()
        //         })
        //     }
        // }
        // Fireworks.prototype.createfirework = function(){
        //     var fireWs = document.createElement('div')
        //     fireWs.className = 'ball'
        //     fireWs.style.backgroundColor = "#" + Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0')
        //     this.fireBox.appendChild(fireWs)
        //     return fireWs
        // }

        // var fire = new Fireworks('#box')
            

          // 脱稿3
        //   function Fierworks (box){
        //     this.fierBox = document.querySelector(box)
        //     this.bindEvent()
        //     this.autoFier()
        // }
        // Fierworks.prototype.bindEvent = function(){
        //     var self = this
        //     self.fierBox.onclick = function(e){
        //         e = e || window.event
        //         var fierLeft = self.createFierwork()
        //         fierLeft.style.left = e.offsetX + 'px'
        //         $(fierLeft).animate({
        //             top : e.offsetY
        //         },500,function(){
        //             fierLeft.remove()
        //             self.boom(e.offsetX,e.offsetY)
        //         })
        //     }
        // }
        // Fierworks.prototype.createFierwork = function(){
        //     var fierWs = document.createElement('div')
        //     fierWs.className = 'ball'
        //     fierWs.style.backgroundColor = "#" + Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0')
        //     this.fierBox.appendChild(fierWs)
        //     return fierWs
        // }
        // // 烟花爆炸效果
        // Fierworks.prototype.boom = function(x,y){
        //     var deg = 0
        //     var r = 100
        //     console.log(x,y)
        //     for(var i = 0; i < 20;i++){
        //        var fier = this.createFierwork()
        //        fier.style.left = x + 'px'
        //        fier.style.top = y + 'px'
        //        deg += 18
        //         var fierTop = Math.round(Math.cos(Math.PI / 180 * deg)*r)
        //         var fierLeft = Math.round(Math.sin(Math.PI / 180 * deg)*r)
        //        $(fier).animate({
        //            top: fierTop + y,
        //            left: fierLeft + x
        //        },500,function(){
        //             this.remove()
        //        })
        //     }
        // }
        // Fierworks.prototype.autoFier = function(){
        //     var self = this
        //     setInterval(function(){
        //         self.fierBox.onclick({
        //             offsetX : Math.round( Math.random() * self.fierBox.offsetWidth) + 100,
        //             offsetY : Math.round( Math.random() * self.fierBox.offsetWidth) + 100,
        //         })
        //     },500)
        // }
        // var fier = new Fierworks('#box')


        // 脱稿四
        function Fierworks (box){
            this.fierBox = document.querySelector(box)
            this.bindEvent()
            this.autofier()
        }
        Fierworks.prototype.bindEvent = function(){
            var self = this
            this.fierBox.onclick = function(e){
                e = e || window.event
                var fier = self.createfier()
                fier.style.left = e.offsetX + 'px'
                $(fier).animate({
                    top : e.offsetY
                },500,function(){
                    fier.remove()
                    self.boom(e.offsetX,e.offsetY)
                })
            }
        }
        Fierworks.prototype.createfier = function(){
            var fier = document.createElement('div')
            fier.className = 'ball'
            fier.style.backgroundColor = '#' + Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0')
            this.fierBox.appendChild(fier)
            return fier
        }
        Fierworks.prototype.boom = function(x,y){
            var deg = 0
            var r = 100
            for(var i = 0 ; i < 20;i++){
                var fier =  this.createfier()
                fier.style.left = x + 'px'
                fier.style.top = y +'px'
                deg += 18
                $(fier).animate({
                    left : Math.round(Math.cos(Math.PI / 180 * deg)*r) + x,
                    top : Math.round(Math.sin(Math.PI / 180 * deg)*r) + y
                },300,function(){
                    this.remove()
                })
            }
        }
        Fierworks.prototype.autofier = function(){
            var self = this
           setInterval(function(){
                self.fierBox.onclick({
                    offsetX : Math.round(Math.random() * self.fierBox.offsetWidth) + 100,
                    offsetY : Math.round(Math.random() * self.fierBox.offsetHeight) + 100
                })
           },300)
        }
        var fier = new Fierworks('#box')
    </script>
</body>
</html>